<template>
	<view class="page bg-fff">
        <block v-if="scene == 1154">
            <pyq-open-chunk></pyq-open-chunk>
        </block>
        <block v-else>
            <!-- <canvas class="canvasSty" :canvas-id="CanvasID" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas> -->
            <block v-if="newsList.length > 0">
                <view class="listBox top-10">
                    <block v-for="(item,index) in newsList" :key="index">
                        <view class="itemBox">
                            <view class="dateBox bg-gray fontBold flex">
                                <text class="point bg-theme right-5"></text>{{item.date}}
                            </view>
                            <view class="contentBox bg-fff">
                                <block v-for="(newItem, num) in item.tips" :key="num">
                                    <view class="newsList top-20">
                                        <view class="newMsg" @click="clickNewsItem(newItem)">
                                            <text class="col-theme fontBold">{{newItem.pmAm}}{{newItem.hoursValue}}</text>
                                            <text class="title left-15 fontBold">{{newItem.title}}</text>
                                            <text class="font13 left-10">{{newItem.content}}</text>
                                        </view>

                                        <view class="imagesGroup top-10" @click="clickNewsItem(newItem)" v-if="testImages.length > 0">
                                            <block v-for="(image, imageIndex) in testImages" :key="imageIndex">
                                                <image class="imageItem" :src="image" mode="widthFix"></image>
                                            </block>
                                        </view>

                                        <view class="bottomBtns flex col-grey font13 top-20">
                                            <view class="btn flex">
                                                <view class="top-4">
                                                    <up-icon name="eye-fill" color="#8A8A8A" size="14"></up-icon>
                                                </view>
                                                <text class="left-3">{{newItem.view_num}}</text>
                                            </view>
                                            <view class="btn flex left-15" @click="shareClick(newItem)">
                                                <view class="top-4">
                                                    <up-icon name="share-square" color="#8A8A8A" size="14"></up-icon>
                                                </view>
                                                <text class="left-3">{{newItem.share_num}}</text>
                                            </view>
                                            <block v-if="userInfo.tips">
                                                <view class="btn flex left-15" @click="toAddNews(newItem)">
                                                    <view class="top-4">
                                                        <up-icon name="edit-pen-fill" color="#8A8A8A" size="14"></up-icon>
                                                    </view>
                                                    <text class="left-3">编辑</text>
                                                </view>
                                                <view class="btn flex left-15" @click="changeShelve(newItem)">
                                                    <view class="top-4">
                                                        <up-icon :name="newItem.shelve?'arrow-upward':'arrow-downward'" color="#8A8A8A" size="14"></up-icon>
                                                    </view>
                                                    <text class="left-3">{{newItem.shelve?'已上架':'已下架'}}</text>
                                                </view>
                                            </block>
                                        </view>
                                    </view>
                                </block>
                            </view>
                        </view>
                    </block>
                    <up-loadmore :status="loadingType" margin-top="30" />
                    <up-modal :show="downloadDialog" :show-title="false" :show-confirm-button="false" :show-cancel-button="false" :mask-close-able="true">
                        <view class="modalCon width100">
                            <image class="expressNewsImg" :src="canvasImgSrc" mode="widthFix"></image>
                            <button class="downloadBtn font14" type="default" @click="clickDownloadImage">
                                <text class="shareIcon bg"></text>
                                <text class="left-15">保存图片到本地</text>
                            </button>
                        </view>
                    </up-modal>
                </view>
            </block>

            <up-empty text="暂无数据" mode="list" marginTop="100" v-if="newsList.length === 0 && loadingType === 'nomore'"></up-empty>

            <button class="addNewBtn bg-fff boxShow clearBtn flex" @click="toAddNews()" v-if="userInfo.tips"><u-icon name="plus" color="#007235" size="50"></u-icon></button>
        </block>

        <up-modal :show="showPrivacy" title="用户隐私保护提示" :show-confirm-button="false" @close="showPrivacy=false">
            <privacy-authorize @close="closePrivacyModal"></privacy-authorize>
        </up-modal>
	</view>
</template>
<script>
    import { mapState, mapActions } from 'pinia';
    import { useConfigStore, useUserInfoStore, useIndexStore } from '@/store/index';
    import { checkWXPrivacyAuthorize, savePhotoAuth } from '@/common/common';
    import { drawRoundRectPath } from '@/common/canvas-tools';
    import { expressNewsShareAPI } from '@/common/api';
    import { getExpressNews, newsShelveAPI } from '@/common/api/tools';
	export default {
		data() {
			return {
                testImages: [
                    'https://image.srea.org.cn/article/01JFC9NTEEA6Q4VD4T02RQ4BS6_微信图片_20241218150833jpg.webp',
                    'https://image.srea.org.cn/xcx/home-banner-img.png',
                    'https://image.srea.org.cn/size/134_137平2_1房_jpg_01J6C3VT0Q7MKW5A6MGT0D0N4H.webp'
                    // 'https://image.srea.org.cn/product/c70cca6e-47b2-cf96-2772-c0ba2108816f.webp',
                    // 'https://image.srea.org.cn/product/666666_jpg_01J6C44DTQ3NS3ANDFNSKGFH4P.webp'
                ],
                newsList: [],
                loadingType: 'loadmore',
                next: null,
                downloadDialog: false,
                canvasW: 750,
                canvasH: 1334,
                CanvasID: 'newsCanvas',
                imgInfoList: [{
                    name: 'bgImg',
                    imgSrc: 'https://image.srea.org.cn/xcx/zixun-canvas-bg.png',
                    info: null
                },{
                    name: 'titleImg',
                    imgSrc: 'https://image.srea.org.cn/xcx/zixun-canvas-title.png',
                    info: null
                },{
                    name: 'bottomImg',
                    imgSrc: 'https://image.srea.org.cn/xcx/zixun-canvas-bottom-bg.png',
                    info: null
                }],
				contentW: 0,
                Title: '',
                titleSize: 36,
                contentSize: 28,
                contentLineHeight: 42,//行间距
                textPadding: 20,//段落之间间距
                qrcodeTop: 30,
				contentStr: '',
                dateVal: '',
                hoursVal: '',
                pmAmVal: '',
                weekCnVal: '',
                weekEnVal: '',
				qrcodeStr1: '长按扫码关注新房超市公众号',
				qrcodeStr2: '掌握更多楼市资讯',
                showQrcode: false,
                TitleColor: '#333333',
                themeColor: '#007235',
                grayColor: '#8A8A8A',
                grayColorOpacity: 'rgba(138, 138, 138, .8)',
				whiteColor: '#FFFFFF',
                LineType: true,
                CanvasBg: '#F1F2F3',
                ViewDetails: '长按或扫描识别二维码',
                canvasImgSrc:'',
                ctx:null,
                showPrivacy: false
			}
		},
		onLoad(options) {
            const that = this;
            let { puid } = options;
            if(puid) {
                this.setPuid(puid)
            }
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;

            uni.$check_and_login(function () {
                that.init();
            })
		},
		computed:{
            ...mapState(useConfigStore, ['scene']),
            ...mapState(useUserInfoStore, ['userInfo']),
            ...mapState(useIndexStore, ['nowCityCode'])
		},
		onShareAppMessage(res) {
            return {
                title: '楼市咨询快报,掌握最新楼市动态',
                path: `/pages/tools/news/news-list?city=${this.nowCityCode}&puid=${this.userInfo.id}`,
            }
		},
        onShareTimeline() {
            return {
                title: '楼市咨询快报,掌握最新楼市动态',
                query: `city=${this.nowCityCode}&puid=${this.userInfo.id}`
            }
        },

        onAddToFavorites() {
            return {
                title: '楼市咨询快报,掌握最新楼市动态',
                query: `city=${this.nowCityCode}&puid=${this.userInfo.id}`
            }
        },

        onReachBottom(){
            this.getNewsList();
        },
		methods: {
            ...mapActions(useConfigStore, ['setPuid']),
            //初始化
            init() {
                this.getNewsList();
                // this.getImgListInfo();
            },

            //初始化数据
            async getNewsList() {
                if(this.loadingType === 'loading' || this.loadingType === 'nomore') return;
                this.loadingType = 'loading';
                let url = this.next ? this.next : `/product/mall/v6/tips?city=${this.nowCityCode}`;

                try {
                    const { status, detail } = await getExpressNews(url);
                    if(status !== 0) {
                        uni.$u.toast(detail);
                        return
                    }
                    // 使用map替代forEach以提高性能
                    const formattedResults = detail.results.map(item => {
                        // 格式化tips数组
                        item.tips = item.tips.map(child => {
                            const sb_time = child.sb_time;
                            return {
                                ...child,
                                pmAm: sb_time.slice(11, 13),
                                dateValue: sb_time.slice(0, 10), 
                                hoursValue: sb_time.slice(14, 19),
                                weekCnValue: sb_time.slice(20, 23),
                                weekEnValue: sb_time.slice(24)
                            };
                        });
                        return item;
                    });
                    
                    // 使用展开运算符一次性添加所有数据
                    this.newsList.push(...formattedResults);
                    this.next = detail.next;
                    this.loadingType = detail.next ? 'loadmore' : 'nomore';
                } catch(err) {}
            },

            //点击新闻项
            clickNewsItem(item){
                // if(item.images.length === 0){
                //     return
                // }
                uni.navigateTo({
                    url: `/pages/tools/news/news-detail?newsId=${item.id}`
                })
            },

            //点击分享按钮绘制图片
            shareClick(info){
                expressNewsShareAPI(info.id).then(res => {
                    info.share_num++
                })
                uni.showLoading({
                    title: '图片生成中'
                })
                let { title, content, show_qrcode, dateValue, pmAm, hoursValue, weekCnValue, weekEnValue } = info;
                this.Title = title;
                this.contentStr = content;
                this.showQrcode = show_qrcode;
                this.dateVal = dateValue;
                this.hoursVal = hoursValue;
                this.pmAmVal = pmAm;
                this.weekCnVal = weekCnValue;
                this.weekEnVal = weekEnValue;
                this.OnCanvas();
            },

            /**
             * 先执行图片缓存
             * 解决安卓手机绘制图片灰色问题
             * */
            async getImgListInfo(){
                for(let i=0; i<this.imgInfoList.length; i++) {
                    await this.getImgInfo(this.imgInfoList[i]);
                }
            },

            //获取图片信息再设置
            async getImgInfo(info){
                return new Promise((resolve, errs) => {
                    const that = this;
                    uni.getImageInfo({
                        src: info.imgSrc,
                        success: function(image) {
                            for(let i=0; i<that.imgInfoList.length; i++) {
                                if(info.name === that.imgInfoList[i].name) {
                                    that.imgInfoList[i].info = image
                                }
                            }
                            resolve(image);
                        },
                        fail(err) {
                            errs(err);
                        }
                    });
                });
            },

            //保存至相册
            downloadImage(){
                const that = this;
                uni.saveImageToPhotosAlbum({
                    filePath: this.canvasImgSrc,
                    success(result) {
                        that.downloadDialog = false;
                        uni.showToast({
                            title: '图片保存成功',
                            icon: 'success',
                            duration: 2000
                        })
                    },
                    complete(e) {}
                })
            },

            //点击保存图片按钮
            async clickDownloadImage() {
                let privacyRes = await checkWXPrivacyAuthorize();
                if(privacyRes) {
                    this.showPrivacy = true;
                    return
                }
                await savePhotoAuth();
                this.downloadImage();
            },

            //关闭隐私政策模态框
            closePrivacyModal() {
                this.showPrivacy = false;
            },

            //重置画板
            resetCanvas(){
                this.ctx.clearRect(0, 0, this.canvasW, this.canvasH);
                this.canvasW = 750;
                this.canvasH = 1334;
                this.contentW = 0;
                this.Title = '';
                this.contentStr = '';
                this.dateVal = '';
                this.hoursVal = '';
                this.pmAmVal = '';
                this.weekCnVal = '';
                this.weekEnVal = '';
            },

            //返回图片宽高，数组形式
            returnImgInfo(type){
                for(let i=0; i<this.imgInfoList.length; i++) {
                    if(this.imgInfoList[i].name === type) {
                        return this.imgInfoList[i].info
                    }
                }
            },


            //开始绘制canvas
			async OnCanvas() {
			    const _this = this;
			    _this.ctx = uni.createCanvasContext(_this.CanvasID,this);
				_this.C_P = uni.upx2px(30);//canvas Paddng 间距
			    const C_W = uni.upx2px(_this.canvasW), //canvas宽度
					contentPadding = uni.upx2px(60),//内容文字区域padding
			        C_Q = uni.upx2px(190), //二维码或太阳码宽高
					C_T = uni.upx2px(370),//title图片宽度
					bottomImgWidth = uni.upx2px(750),//底部图片宽度
					logoWidth = C_W - _this.C_P * 2;//logo宽度
			    let _strlineW = 0; //文本宽度

                //匹配对应的图片信息
                let topImgInfo = _this.returnImgInfo('bgImg');
                let titleImgInfo = _this.returnImgInfo('titleImg');
                let bottomImgInfo = _this.returnImgInfo('bottomImg');
                let qrcodeInfo = _this.returnImgInfo('qrcodeImg');
                let logoInfo = _this.returnImgInfo('logoImg');

                //获取图片宽高，数组形式
                let topImgWH = [topImgInfo.width, topImgInfo.height];
                let titleImgWH = [titleImgInfo.width, titleImgInfo.height];
				let bottomImgWH = [bottomImgInfo.width, bottomImgInfo.height];
				let logoWH = [logoInfo.width, logoInfo.height];
			    let qrcodeWH = [qrcodeInfo.width, qrcodeInfo.height];

			    let imgW = C_W - _this.C_P * 2;
				_this.contentW = C_W - contentPadding * 2;//内容区宽度
				let startStrY = 30;//第一行元素初始Y坐标

                if (topImgWH[0] != C_W) {
                    topImgWH[1] = Math.floor((C_W / topImgWH[0]) * topImgWH[1]);
                    topImgWH[0] = C_W;
                }

				titleImgWH[1] = Math.floor((C_T / titleImgWH[0]) * titleImgWH[1]);
				titleImgWH[0] = C_T;

				if (bottomImgWH[0] != C_W) {
					bottomImgWH[1] = Math.floor((bottomImgWidth / bottomImgWH[0]) * bottomImgWH[1]);
					bottomImgWH[0] = bottomImgWidth;
				}

				logoWH[1] = Math.floor((logoWidth / logoWH[0]) * logoWH[1]);
				logoWH[0] = logoWidth;

			    if (qrcodeWH[0] != C_Q) {
			        qrcodeWH[1] = Math.floor((C_Q / qrcodeWH[0]) * qrcodeWH[1]);
			        qrcodeWH[0] = C_Q;
			    }

				//计算标题高度
                let titleHeight = (_this.calcTitleHeight(_this.ctx, 0) - uni.upx2px(_this.titleSize+12) + uni.upx2px(_this.titleSize));

                //计算文章高度
                let contentY = 0;//文章初始化高度
                let sectionArr = _this.contentStr.split('\n');//文章内容换行分割字符串
                _this.ctx.setFontSize(uni.upx2px(_this.contentSize)); //设置标题字体大小
                _this.ctx.setTextBaseline('top');
                for(let sectionI = 0; sectionI < sectionArr.length; sectionI++) {
                	let item = sectionArr[sectionI];
                	let sectionHeight = _this.drawText(_this.ctx, item, contentY, false);
                	contentY = sectionHeight + uni.upx2px(_this.textPadding);//段落之间距离
                }

                //内容段落高度 = 段落最终Y坐标 - 段落间距 - 行间距 + 第一行文字高度
                let contentHeight = contentY - uni.upx2px(_this.textPadding) - uni.upx2px(_this.contentLineHeight) + uni.upx2px(_this.contentSize);

				//中间卡片高度= 投影顶部距离标题顶部20 + title高度 + 横线宽度和上下间距 + 文章高度 + 日期高度 + 二维码顶部距离 + 二维码高度+40阈值
				let cardHeight = 20 + titleHeight + 41 + contentHeight + uni.upx2px(_this.contentSize*2) + _this.qrcodeTop + (this.showQrcode ? qrcodeWH[1] : 0) + 40;

				//设置canvas高度 = startStrY + 图片高度 + 间距20 + 中间卡片高度 + 底图高度 - 30
				_this.canvasW = C_W;
				_this.canvasH = startStrY + titleImgWH[1] + 20 + cardHeight + bottomImgWH[1] - 30;
				_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
				_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小

				//背景图
				_this.ctx.drawImage(topImgInfo.path, 0, 0, topImgWH[0], topImgWH[1]);

				//底部图片
				_this.ctx.drawImage(bottomImgInfo.path, 0, startStrY + titleImgWH[1] + 20 + cardHeight - 30, bottomImgWH[0], bottomImgWH[1]);

			    //快报图片展示
			    _this.ctx.drawImage(titleImgInfo.path, _this.C_P, startStrY, titleImgWH[0], titleImgWH[1]);

				//卡片与快报之间间距为20
				startStrY += (titleImgWH[1] + 20);

				//绘制并填充一个圆角矩形和投影
				_this.fillRoundRect(_this.ctx, _this.C_P-2, startStrY, imgW+4, cardHeight + 4, 20, 'rgba(0,0,0,.05)');
				_this.fillRoundRect(_this.ctx, _this.C_P, startStrY + 2, imgW, cardHeight, 20, '#FFFFFF');

                //第一行标题顶部距离投影卡片顶部边框间距
                startStrY += 20;

				/**
                 * title
                 * Y坐标为第一行文字底部开始
                 * */
                _this.ctx.setTextAlign("left");
				_this.ctx.setFontSize(uni.upx2px(_this.titleSize)); //设置标题字体大小
				_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
				let _TitStrIndex = 0; //每次开始截取的字符串的索引
				let TitStrWidth = 0;//标题宽度
				let startHeight = startStrY; //绘制字体距离canvas顶部的初始高度
				let _Titnum=1;

				for (let i = 0; i < _this.Title.length; i++) {
				    TitStrWidth += _this.ctx.measureText(_this.Title[i]).width;
				    if (TitStrWidth > _this.contentW) {
				        if(_Titnum == 3&&_this.LineType){
				            //文字换行数量大于3进行省略号处理
				            _this.ctx.fillText(_this.Title.substring(_TitStrIndex, i-2)+'...', _this.C_P+15, startHeight);
				            TitStrWidth = 0;
							startHeight += uni.upx2px(_this.titleSize+12);
				            _TitStrIndex = i;
				            _Titnum++;
				            break;
				        }else{
				            _this.ctx.fillText(_this.Title.substring(_TitStrIndex, i), _this.C_P+15, startHeight);
				            TitStrWidth = 0;
				            startHeight += uni.upx2px(_this.titleSize+12);
				            _TitStrIndex = i;
				            _Titnum++;
				        }
				    }
                    if (i == _this.Title.length - 1) {
				        _this.ctx.fillText(_this.Title.substring(_TitStrIndex, i + 1), _this.C_P+15, startHeight);
				        TitStrWidth = 0;
                        startHeight += uni.upx2px(_this.titleSize+12);
				    }
				}

                //横线Y坐标 += 标题高度+20
                startStrY = (startHeight - uni.upx2px(_this.titleSize+12) + uni.upx2px(_this.titleSize) + 20);

                //直线上下边距为20
                _this.ctx.beginPath();
                _this.ctx.moveTo(contentPadding, startStrY);
                _this.ctx.lineTo(C_W - contentPadding, startStrY);
                _this.ctx.lineWidth = 0.5;
                _this.ctx.strokeStyle = _this.grayColorOpacity;
                _this.ctx.stroke();
                _this.ctx.closePath();

                //横线距离文章间距
                startStrY += 20;

				//绘制文章内容
				let strInitHeight = startStrY;//文章初始化高度
				_this.ctx.setFontSize(uni.upx2px(_this.contentSize)); //设置标题字体大小
				for(let sectionI = 0; sectionI < sectionArr.length; sectionI++) {
					let item = sectionArr[sectionI];
					let sectionHeight = _this.drawText(_this.ctx, item, strInitHeight);
					strInitHeight = sectionHeight + uni.upx2px(_this.textPadding);//段落之间距离
				}

                //Y坐标 = 文章坐标
                startStrY = (strInitHeight - uni.upx2px(_this.textPadding) - uni.upx2px(_this.contentLineHeight) + uni.upx2px(_this.contentSize));

				//日期
                if(_this.nowCityCode == '310100') {
                    startStrY += uni.upx2px(_this.contentSize*2);
                    _this.ctx.setFontSize(uni.upx2px(_this.contentSize));
                    _this.ctx.fillText(_this.dateVal + ' ' + _this.pmAmVal + _this.hoursVal, contentPadding, startStrY);
                }

				//Y坐标 += 文章内容底部与二维码的距离
				startStrY += _this.qrcodeTop;
                
                if(this.showQrcode) {
                    //#ifdef MP-WEIXIN
                    //二维码
                    _this.ctx.drawImage(qrcodeInfo.path, C_W - contentPadding - qrcodeWH[0], startStrY, qrcodeWH[0], qrcodeWH[1]);
                    
                    //长按关注
                    _this.ctx.setTextAlign("right");
                    _this.ctx.setFillStyle(_this.grayColor);
                    _this.ctx.setFontSize(uni.upx2px(24));
                    _this.ctx.fillText(_this.qrcodeStr1, _this.canvasW - contentPadding - qrcodeWH[0] - 10, startStrY+45);
                    _this.ctx.fillText(_this.qrcodeStr2, _this.canvasW - contentPadding - qrcodeWH[0] - 10, startStrY+65);
                    //#endif
                    
                    //logoY坐标 = canvas高度 - 26边距 - logo高度
                    _this.ctx.drawImage(logoInfo.path, _this.C_P, _this.canvasH - 26 - logoWH[1], logoWH[0], logoWH[1]);
                }
                
			    //延迟后渲染至canvas上
			    setTimeout(function() {
			        _this.ctx.draw(true,(ret)=>{
			            _this.getNewImage();
			        });
			    }, 600);
			},

            /**
             * ctx
             * startHeight 初始高度
             * 计算标题高度
             * 初始高度+字体大小。标题顶部距离底部像素
             * */
             calcTitleHeight(ctx, startHeight){
                ctx.setTextAlign("left");
                ctx.setFontSize(uni.upx2px(this.titleSize)); //设置标题字体大小
                let _TitStrIndex = 0; //每次开始截取的字符串的索引
                let TitStrWidth = 0;//标题宽度
                let _Titnum=1;

                for (let i = 0; i < this.Title.length; i++) {
                    TitStrWidth += this.ctx.measureText(this.Title[i]).width;
                    if (TitStrWidth > this.contentW) {
                        if(_Titnum == 3&&this.LineType){
                            //文字换行数量大于3进行省略号处理
                            TitStrWidth = 0;
                			startHeight += uni.upx2px(this.titleSize+12);
                            _TitStrIndex = i;
                            _Titnum++;
                            break;
                        }else{
                            TitStrWidth = 0;
                            startHeight += uni.upx2px(this.titleSize+12);
                            _TitStrIndex = i;
                            _Titnum++;
                        }
                    }
                    if (i == this.Title.length - 1) {
                        TitStrWidth = 0;
                        startHeight += uni.upx2px(this.titleSize+12);
                    }
                }
                return startHeight
             },

			/**
			 * 绘制换行符文章
			 * ctx
			 * item 文字段落
			 * initHright 文本初始Y坐标
             * draw 是否绘制
             * 返回最终Y坐标
			 * */
			drawText(ctx, item, initHeight, draw=true) {
				let initWidth = 0;//初始X坐标
				let lastStrIndex = 0;//字符串索引
				for (let strI = 0; strI < item.length; strI++) {
				    initWidth += ctx.measureText(item[strI]).width;
				    if (initWidth > (this.contentW - 10)) {
                        if(draw) {
                            ctx.fillText(item.substring(lastStrIndex, strI), this.C_P+15, initHeight);
                        }
						initHeight += uni.upx2px(this.contentLineHeight);//行与行的间距
						initWidth=0;
						lastStrIndex=strI;
				    }
                    if (strI == item.length - 1) {
                        if(draw) {
                            ctx.fillText(item.substring(lastStrIndex, strI + 1), this.C_P+15, initHeight);
                        }
                        initHeight += uni.upx2px(this.contentLineHeight);//行与行的间距
                        initWidth = 0;
				    }
				}
				return initHeight
			},

			/**该方法用来绘制一个有填充色的圆角矩形
			 *@param cxt:canvas的上下文环境
			 *@param x:左上角x轴坐标
			 *@param y:左上角y轴坐标
			 *@param width:矩形的宽度
			 *@param height:矩形的高度
			 *@param radius:圆的半径
			 *@param fillColor:填充颜色
			 **/
			fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
				//圆的直径必然要小于矩形的宽高
				if (2 * radius > width || 2 * radius > height) { return false; }

				cxt.save();
				cxt.translate(x, y);
				//绘制圆角矩形的各个边
				drawRoundRectPath(cxt, width, height, radius);
				cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值
				cxt.fill();
				cxt.restore();
			},

            //canvas生成图片
			getNewImage(){
			    const _this = this;
			    uni.canvasToTempFilePath({
			        canvasId: _this.CanvasID,
			        quality: 1,
			        complete: (res) => {
                        uni.hideLoading();
                        _this.resetCanvas();
						_this.canvasImgSrc = res.tempFilePath;
                        _this.downloadDialog = true;
			        },
			    },this);
			},
            
            //跳转添加新闻编辑页
            toAddNews(row=null) {
                uni.navigateTo({
                    url: `/pages/follow/news/news-add?info=${row?encodeURIComponent(JSON.stringify(row)):''}`
                })
            },
            
            //点击上下架
            async changeShelve(row) {
                try {
                    const { status, detail } = await newsShelveAPI({
                        id: row.id
                    });

                    if(status !== 0) {
                        uni.$u.toast(detail);
                        return;
                    }

                    uni.showToast({
                        title: row.shelve?'下架成功':'上架成功',
                        icon: 'success'
                    })
                    row.shelve = !row.shelve;
                } catch(err) {}
            }
		}
	}
</script>

<style lang="scss" scoped>
	.page{
        line-height: 1;
		min-height: 100vh;
        .canvasSty{
            position: fixed;
            left: -2000px;
            top: 0;
        }
        .modalCon{
            padding: 40rpx 28rpx 60rpx 28rpx;
            .expressNewsImg{
                width: 100%;
            }
            .downloadBtn{
                border-radius: 33rpx;
                width: 70%;
                height: 65rpx;
                line-height: 65rpx;
                border: 2rpx solid $theme-color;
                color: $theme-color;
                background-color: #FFFFFF;
                margin-top: 60rpx;
                padding: 0;
                position: relative;
                &::after{
                	border: none;
                }
                .shareIcon{
                    position: absolute;
                    top: 6rpx;
                    left: 8rpx;
                    width: 50rpx;
                    height: 50rpx;
                    display: inline-block;
                    background-image: url("https://image.srea.org.cn/xcx/icon/express-news-share-icon.png");
                }
            }
        }
        
		.listBox{
            .itemBox{
                .dateBox{
                    padding-left: 28rpx;
                    height: 70rpx;
                    line-height: 70rpx;
                    justify-content: flex-start;
                    .point{
                        width: 10rpx;
                        height: 10rpx;
                        border-radius: 50%;
                        display: inline-block;
                    }
                }
                .contentBox{
                    padding: 2rpx 28rpx 40rpx 28rpx;
                    .newsList{
                        padding-bottom: 40rpx;
                        .newMsg{
                            line-height: 1.6;
                        }
                        .imagesGroup{
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            gap: 10rpx;
                            .imageItem{
                                width: 100%;
                                height: 100%;
                                border-radius: 10rpx;
                            }
                        }
                    }
                    .bottomBtns{
                        justify-content: flex-end;
                    }
                }
            }
		}
        .addNewBtn{
            position: fixed;
            bottom: 200rpx;
            right: 30rpx;
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            border: 2rpx solid rgba(0,0,0,.03);
        }
	}
</style>
